<template>
    <div class="subpage bill-detail-container">
        <div class="bill-detail-box">
            <div class="bill-detail-box-top">
                <img src="../../../assets/img/bill_icon1.png" alt="" v-if="detail.actCode == 1 || detail.actCode == 5">
                <img src="../../../assets/img/bill_icon2.png" alt="" v-if="detail.actCode == 2">
                <img src="../../../assets/img/bill_icon3.png" alt="" v-if="detail.actCode == 3">
                <img src="../../../assets/img/bill_icon4.png" alt="" v-if="detail.actCode == 4">
                <img src="../../../assets/img/bill_icon5.png" alt="" v-if="detail.actCode == 6">
                <p>{{detail.actName}}</p>
                <p class="color-primary">{{detail.actCategory == 1 ? '-' : '+'}}{{detail.actCode == 4 ? detail.actMoney : detail.payMoney}}元</p>
            </div>
            <div v-if="detail.actCategory == 1">
                <ul class="bill-detail-box-bottom" v-if="detail.actCode == 6">
                    <li>
                        <span>交易内容</span>
                        <span>{{detail.actName}}</span>
                    </li>
                    <li>
                        <span>手续费</span>
                        <span>{{detail.serviceFee}}元</span>
                    </li>
                    <li>
                        <span>到账金额</span>
                        <span>{{detail.arrivalAccountMoney}}元</span>
                    </li>
                    <li>
                        <span>交易时间</span>
                        <span>{{detail.actTime}}</span>
                    </li>
                    <li>
                        <span>交易编号</span>
                        <span>{{detail.outTradeNo}}</span>
                    </li>
                </ul>
                <ul class="bill-detail-box-bottom" v-else>
                    <li>
                        <span>交易内容</span>
                        <span>{{detail.actName}}</span>
                    </li>
                    <li>
                        <span>购买数量</span>
                        <span>{{detail.quantity}}{{detail.quantityUnit}}</span>
                    </li>
                    <li>
                        <span>订单金额</span>
                        <span>{{detail.orderMoney}}元</span>
                    </li>
                    <li>
                        <span>优惠金额</span>
                        <span>{{detail.discountMoney}}元</span>
                    </li>
                    <li>
                        <span>支付金额</span>
                        <span>{{detail.payMoney}}元</span>
                    </li>
                    <li>
                        <span>支付方式</span>
                        <span>{{detail.payMethod}}</span>
                    </li>
                    <li>
                        <span>合同编号</span>
                        <span>{{detail.contractCode}}</span>
                    </li>
                    <li>
                        <span>支付时间</span>
                        <span>{{detail.payTime}}</span>
                    </li>
                    <li>
                        <span>订单编号</span>
                        <span>{{detail.outTradeNo}}</span>
                    </li>
                </ul>
            </div>
            <ul class="bill-detail-box-bottom" v-if="detail.actCategory == 2">
                <li>
                    <span>交易内容</span>
                    <span>{{detail.actName}}</span>
                </li>
                <!-- <li>
                    <span>收款详情</span>
                    <span class="check-btn" @click="checkFn(detail.dataId, detail.actCode)">查看</span>
                </li> -->
                <li>
                    <span>收款时间</span>
                    <span>{{detail.actTime}}</span>
                </li>
                <li>
                    <span>合同编号</span>
                    <span>{{detail.contractCode}}</span>
                </li>
                <li>
                    <span>交易单号</span>
                    <span>{{detail.outTradeNo}}</span>
                </li>
                <!-- <li>
                    <span>商户单号</span>
                    <span>2154500200122211</span>
                </li> -->
            </ul>
        </div>    
    </div>
</template>

<script>
export default {
    data() {
        return {
            detail: {}
        }
    },
    created() {
        this.getDetailData()
    },
    methods: {
        getDetailData() {
            this.$api.get('/api/trading/detail/' + this.$route.params.id)
                .then((res) => {
                    if(res.data.actCode == 6 || res.data.actCode == 3){
                        res.data.payMoney = res.data.actMoney;
                        if(res.data.actTime) {
                            if(res.data.actTime.indexOf('T') != -1) {
                                res.data.actTime = res.data.actTime.replace('T', ' ')
                            }
                        }
                    }else{
                        if(res.data.payTime){
                            if(res.data.payTime.indexOf('T') != -1) {
                                res.data.payTime = res.data.payTime.replace('T', ' ')
                            }
                        }
                    }
                    this.detail = res.data;
                })
        }
    }
}
</script>

<style lang="scss" scoped>
    .bill-detail-container {
        width: 100%;
        padding: 0 16px;
        box-sizing: border-box;
        background-color: #fff;
        .bill-detail-box {
            width: 100%;
            .bill-detail-box-top {
                width: 100%;
                padding: 23px 0;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                border-bottom: 1px solid #f2f2f2;
                img {
                    width: 60px;
                    height: 60px;
                    object-fit: cover;
                }
                p {
                    margin-top: 14px;
                    font-size: 16px;
                }
                p:last-child {
                    font-weight: 500;
                }
            }
            .bill-detail-box-bottom {
                width: 100%;
                padding-top: 24px;
                box-sizing: border-box;
                li {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 16px;
                    span {
                        &:first-child {
                            display: block;
                            width: 88px;
                            color: #969C9E;
                        }
                        &:last-child {
                            flex: 1;
                            color: #5D6164;
                        }
                    }
                    .check-btn {
                        color: #4572CF!important;
                    }
                }
            }
        }
    }
</style>